<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<style>
  #layout-viewport {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: green;
  }

  #spacer {
    width: 200vw;
    height: 200vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: red;
  }

  html, body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }

  html {
    overflow-x: hidden;
    overflow-y: hidden;
  }
</style>
<div id="layout-viewport">
  To test manually, pinch zoom into the page and scroll around. You should be
  able to pan around within the green area but you should never scroll the
  document (you should never see red).
</div>
<div id="spacer"></div>
<script>
  const viewport_center = {x: 400, y: 300};

  window.onload = () => {
    if (!window.internals)
      return;

    internals.setPageScaleFactor(2);

    promise_test (async (test) => {
      await waitForCompositorCommit();

      const delta = {x: 0, y: 2000};
      await smoothScrollWithXY(delta.x,
                               delta.y,
                               viewport_center.x,
                               viewport_center.y,
                               GestureSourceType.TOUCH_INPUT,
                               SPEED_INSTANT);

      assert_equals(window.scrollY, 0, "Document doesn't scroll vertically.");
      assert_equals(window.visualViewport.offsetTop, 300, "VisualViewport pans vertically.");
    }, "Test viewport scrolling for overflow-y: hidden.");

    promise_test (async (test) => {
      await waitForCompositorCommit();

      const delta = {x: 2000, y: 0};
      await smoothScrollWithXY(delta.x,
                               delta.y,
                               viewport_center.x,
                               viewport_center.y,
                               GestureSourceType.TOUCH_INPUT,
                               SPEED_INSTANT);

      assert_equals(window.scrollX, 0, "Document doesn't scroll horizontally.");
      assert_equals(window.visualViewport.offsetLeft, 400, "VisualViewport pans horizontally.");
    }, "Test viewport scrolling for overflow-x: hidden.");
  }
</script>
